<template>
  <div>
    <div class="title-warp">
      {{ title }}
      <div>
        <el-radio-group v-model="radio" size="mini" @change="handleRadioChange">
          <el-radio-button label="1">日</el-radio-button>
          <el-radio-button label="2">月</el-radio-button>
          <el-radio-button label="3">年</el-radio-button>
          <el-radio-button label="4">生命期</el-radio-button>
        </el-radio-group>
        &nbsp;
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
          size="mini"
          style="width: 130px"
          @change="handleDateChange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-show="radio == '1'"
        >
        </el-date-picker>
        <el-date-picker
          v-model="date"
          type="month"
          placeholder="选择日期"
          size="mini"
          style="width: 130px"
          @change="handleDateChange"
          v-show="radio == '2'"
          format="yyyy-MM"
          value-format="yyyy-MM"
        >
        </el-date-picker>
        <el-date-picker
          v-model="date"
          type="year"
          placeholder="选择日期"
          size="mini"
          style="width: 130px"
          @change="handleDateChange"
          v-show="radio == '3'"
          format="yyyy"
          value-format="yyyy"
        >
        </el-date-picker>
        <el-date-picker
          v-model="date"
          type="year"
          placeholder="选择日期"
          size="mini"
          style="width: 130px"
          @change="handleDateChange"
          v-show="radio == '4'"
          format="yyyy"
          value-format="yyyy"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'overviewTitle',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      radio: '1',
      date: this.dayjs().format('YYYY-MM-DD'),
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleRadioChange(val) {
      switch (val) {
        case '1':
          this.date = this.dayjs().format('YYYY-MM-DD')
          break
        case '2':
          this.date = this.dayjs().format('YYYY-MM')
          break
        case '3':
          this.date = this.dayjs().format('YYYY')
          break
        case '4':
          this.date = this.dayjs().format('YYYY')
      }
      this.$emit('radioChange', this.radio, this.date)
    },
    handleDateChange() {
      this.$emit('dateChange', this.date)
    },
  },
}
</script>
<style lang="scss" scoped>
.title-warp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
